<template>
  <div class="ring-chart-cmp">
    <div class="ring-chart-cmp-title">{{ title }}</div>
    <div class="ring-chart-cmp-main">
      <div class="ring-chart-cmp-main-left">
        <dv-active-ring-chart :config="config" class="ring-chart-item" ref="pRef" :key="tb1Key" />
      </div>
      <div class="ring-chart-cmp-main-right">
        <div class="ring-chart-color" v-for="(item, index) in config.data" :key="index">
          <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': config.color[index], 'border-radius': '50%'}"></span>
          <span style="margin: 0 10px;">{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RingCharCmp',
  props:["title", "config"],
  data () {
    return {
      tb1Key: 1,
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeEvent)

    this.resizeEvent();
  },
  beforeDestroy() { //在组件生命周期结束的时候销毁。
      window.removeEventListener('resize', this.resizeEvent);
  },
  methods: {
    resizeEvent() {
      var that = this;
      this.$nextTick(() => {
        that.tb1Key++;
      });
      
    }
  }
}
</script>

<style lang="scss" scoped>
.ring-chart-cmp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  // padding-left: 00px;

  .ring-chart-cmp-title {
    position: absolute;
    font-size: .175rem;
    // padding: .12rem;
    font-weight: bold;
    top: .12rem;
    left: .12rem;
  }
  .ring-chart-cmp-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    .ring-chart-cmp-main-left {
      width: 70%;

      .ring-chart-item {
        width: 100%;
        height: 100%;
        margin-top: .2rem;
      }
    }

    .ring-chart-cmp-main-right {
      width: 30%;
      padding-top: .5rem;

      .ring-chart-color {
        margin: 0.1rem 0rem;
      }
    }
  }
}
</style>
